<template>
  <div>
    <ul>
      <li v-for="v in list" :key="v.id" @click="toDetail(v.id)">
        <p>{{ v.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
   data() {
    return {
      list: [{
        title: '呵呵',
        id: 1
      },{
        title: '哈哈',
        id: 2
      },{
        title: '嘻嘻',
        id: 3
      },{
        title: '嘿嘿',
        id: 4
      }]
    }
  },
  methods: {
    toDetail(id) {
      // 查询字符串跳转
      // this.$router.push(`/detail?id=${id}`)
      // this.$router.push({ name: 'Detail', query: { id } })

      // 动态路由
      // this.$router.push(`/detail/${id}`)
      this.$router.push({ name: 'Detail', params: { id } })
    } 
  }
}
</script>

<style scoped>
li {
  padding: 20px;
  border: 1px solid #ccc;
}
</style>